<template>
  <div class="dfc cs">
    <v-preview title="总览" :list="previews" class="bd-1 bdr-10 pd-10"/>
    <div class="statistics">
      <v-charts class="pd-10 bdr-10 bd-1" title="--" v-model="chartDate" @refresh="getChart" ref="charts"/>
      <div style="display: flex;flex-direction: column;">
        <v-bi class="pd-10 bdr-10 bd-1 bi" :list="biList"/>
        <v-order :tableData="tableData" title="订单" :repeat="false" rightBtn="查看更多" class="pd-10 bdr-10 bd-1 fx-1" style="margin-top: 10px;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import vPreview from '@/components/home-components/preview'
  import vBi from '@/components/home-components/bi'
  import vOrder from '@/components/home-components/order'
  import vCharts from '@/components/home-components/charts'
  import vPlainTable from '@/components/plain-table'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vPreview, vBi, vCharts, vPlainTable, vOrder
    }
  })
  export default class Boss extends Vue {
    previews = [
      {
        title: '超时订单',
        value: ''
      },
      {
        title: '待审核票据',
        value: ''
      },
      {
        title: '待调价票据',
        value: ''
      },
      {
        title: '新增企业',
        value: ''
      }
    ]
    wallet = {}
    chartDate = 30
    biList = [
      {
        title: '本日挂票数量（张）',
        value: ''
      },
      {
        title: '本日订单数量（笔）',
        value: ''
      },
      {
        title: '本月挂票数量（张）',
        value: ''
      },
      {
        title: '本月订单数量（笔）',
        value: ''
      }
    ]
    tableData: TableData = {
      header: [
        {
          key: 'id',
          label: '订单号'
        },
        {
          key: 'createTime',
          label: '创建时间'
        },
        {
          key: 'orderStatus',
          label: '交易状态',
          formatter: row => this.$utils.toTypeFormat(row.orderStatus,this.$dict.orderTypes)
        }
      ],
      body: [
        {
          name: '呢咋',
          channelCount: 5,
          unitCount: 12,
          amount: 22222
        },
        {
          name: '呢咋',
          channelCount: 5,
          unitCount: 12,
          amount: 22222
        }
      ],
      footer: {
        total: 999,
        currentPage: 1
      },
      expand: {
        title: '订单',
        path: '/transaction/order/list'
      }
    }
    @Getter userInfo

    makeChart (data) {
      let dates = data.myCommisionList.map(v => Object.keys(v)[0])
      return {
        columns: ['日期', '我的利润', '渠道商佣金', '爱仕达多'],
        rows: dates.map(v => ({
          '日期': v,
          '我的利润': data.myCommisionList[v],
          '渠道商佣金': data.channelDealerList[v],
          '渠道专员佣金': data.channelCommisionList[v]
        }))
      }
    }

    async getChart () {
      let res: AjaxResponse = await this.$axios.post('b/boms/commision/statistics/list', {
        day: this.chartDate
      })
      this.$refs.charts.init(this.makeChart(res.data))
    }

    async getBi () {
      let res: AjaxResponse = await this.$axios.get('b/boms/operator/custser')
      this.previews[0].value = res.data.overtimeOrder
      this.previews[1].value = res.data.allUncheckedBill
      this.previews[2].value = res.data.allToAdjustBill
      this.previews[3].value = res.data.allNewEnterprsie
      //
      this.biList[0].value = res.data.dailyBill
      this.biList[1].value = res.data.dayOrderSum
      this.biList[2].value = res.data.monthBill
      this.biList[3].value = res.data.monthOrderSum
    }

    async getOrder () {
      let res: AjaxResponse = await this.$axios.post('b/boms/order', {
        pageSize: 3,
        currentPage: 1,
        enterpriseUserId: this.userInfo.userId
      })
      this.tableData.body = res.data.items
    }

    mounted () {
      // this.getChart()
      this.getBi()
      this.getOrder()
    }
  }
</script>
<style lang="less" scoped>
  .wallet {
    margin-top: 10px;
  }

  .statistics {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    > div {
      width: 49.5%;
    }
  }

  .bi {
    height: 234px;
  }

  .cs {
    min-height: 1000px;
  }

</style>
